<template>
  <!-- 告警中心 -->
  <div class="alarm">
    <el-row class="alarm-container">
      <!-- 左侧菜单栏 -->
      <el-col :span="3" class="navigation-bar">
        <div class="alarm-level">
          <!-- 左边图片 -->
          <div class="pic"><img src="./img/alarm-level.png" alt="" /></div>
          <!-- 右边文字 -->
          <div class="wenzi">
            <p class="china">告警级别</p>
            <p class="Eng">Alarm level</p>
          </div>
        </div>
        <!-- 常规告警-->
        <p :class="showinfo == 1 ? 'Activemenu' : 'menu'" @click="handler(1)">
          <img v-show="showinfo == 1" src="../Alarm//img/icon-warn-serious-light.svg" alt="" />
          <img v-show="showinfo !== 1" src="../Alarm//img/icon-warn-serious-gray.svg" alt="" />
          常规告警
        </p>
        <!-- 严重警告-->
        <p :class="showinfo == 2 ? 'Activemenu' : 'menu'" @click="handler(2)">
          <img v-show="showinfo == 2" src="../Alarm//img/icon-warn-normal-light.svg" alt="" />
          <img v-show="showinfo !== 2" src="../Alarm//img/icon-warn-normal-gray.svg" alt="" />
          严重告警
        </p>
      </el-col>
      <!-- 右侧信息栏 -->
      <el-col :span="21" class="information-bar">
        <div class="information-content">
          <!-- 最顶部卡片 -->
          <div class="information">
            <div class="card-info">
              <!--有背景的 -->
              <div class="info-top">
                <!-- 左边图片 -->
                <div class="info-top-img">
                  <img src='./img/Frame1000000819(1).png' alt="" />
                </div>
                <!-- 右边文字 -->
                <div class="info-top-title">
                  <p class="title">告警中心</p>
                  <p class="little-title">监控设备异常行为，确保设备正常运行</p>
                </div>
                <div class="right-circle">
                  <img class="right-circle1" src="./img/Ellipse.png" alt="">
                  <img class="right-circle2" src="./img/Ellipse234(1).png" alt="">
                </div>
              </div>
              <!-- 无背景的 -->
              <div class="info-bottom">
                <div class="picker">
                  <!-- 设备下拉框 -->
                  <el-select v-model="selectDevice" placeholder="请选择设备" style="width:580px;margin-right:10px;" clearable @clear="clearSelection">
                    <el-option v-for="item in devicesStore.$state.devices" :key="item.TerminalIdentity" :label="`${item.DeviceName} (${item.TerminalName})`" :value="item.TerminalIdentity">
                      <!-- <span style="float: left">{{ item.DeviceName }}</span> -->
                    </el-option>
                  </el-select>
                  <!-- 日期选择器 -->
                  <el-date-picker v-model="dateRange" type="datetimerange" :picker-options="pickerOptions" format="YYYY-MM-DD HH:mm:ss" class="datePicker" @change="handleDateChange"></el-date-picker>
                  <!-- 双左 -->
                  <el-button @click="decreaseDate" class="jiantou">
                    <svg t="1689236716686" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2986" width="16" height="16">
                      <path d="M558.99 204.98L465 110.99 64 512l401.01 401.01L559 819.02 251.97 512l307.02-307.02z m401.01 0l-93.98-93.99L465.01 512l401.01 401.01L960 819.02 652.98 512 960 204.98z"
                        p-id="2987" fill="#8c8c8c"></path>
                    </svg>
                  </el-button>
                  <!-- 单左 -->
                  <el-button @click="leftDate" class="jiantou">
                    <svg t="1689236989589" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3901" width="16" height="16">
                      <path
                        d="M729.6 931.2l-416-425.6 416-416c9.6-9.6 9.6-25.6 0-35.2-9.6-9.6-25.6-9.6-35.2 0l-432 435.2c-9.6 9.6-9.6 25.6 0 35.2l432 441.6c9.6 9.6 25.6 9.6 35.2 0C739.2 956.8 739.2 940.8 729.6 931.2z"
                        p-id="3902" fill="#8c8c8c"></path>
                    </svg>
                  </el-button>
                  <!-- 单右 -->
                  <el-button @click="rightDate" class="jiantou" :disabled="!dayjs(endDate.value).isSame(dayjs().format('YYYY-MM-DD HH:mm:ss'), 'day')">
                    <svg t="1689237082849" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4200" width="16" height="16">
                      <path
                        d="M761.6 489.6l-432-435.2c-9.6-9.6-25.6-9.6-35.2 0-9.6 9.6-9.6 25.6 0 35.2l416 416-416 425.6c-9.6 9.6-9.6 25.6 0 35.2s25.6 9.6 35.2 0l432-441.6C771.2 515.2 771.2 499.2 761.6 489.6z"
                        p-id="4201" fill="#8c8c8c"></path>
                    </svg>
                  </el-button>
                  <!-- 双右 -->
                  <el-button @click="increaseDate" class="jiantou" :disabled="!dayjs(endDate.value).isSame(dayjs().format('YYYY-MM-DD HH:mm:ss'), 'day')">
                    <svg t="1689236647625" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2543" width="16" height="16">
                      <path d="M465.01 204.98L559 110.99 960 512 558.99 913.01 465 819.02 772.03 512 465.01 204.98z m-401.01 0l93.98-93.99L558.99 512 157.98 913.01 64 819.02 371.02 512 64 204.98z"
                        p-id="2544" fill="#8c8c8c"></path>
                    </svg>
                  </el-button>
                  <span @click="changeDate(1)" class="time">今日</span>
                  <span @click="changeDate(3)" class="time">近3日</span>
                  <span @click="changeDate(7)" class="time">近7日</span>
                  <span @click="changeDate(30)" class="time">近30日</span>
                </div>
                <div class="yellowbtn">
                  <el-button class="btn">
                    <svg t="1689239872514" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5324" width="14" height="14">
                      <path
                        d="M756.565333 697.258667c2.133333 1.493333 4.224 3.157333 6.101334 5.12l241.664 241.621333c16.256 16.256 16.512 43.52-0.128 60.16a42.453333 42.453333 0 0 1-60.202667 0.170667l-241.664-241.664a41.429333 41.429333 0 0 1-5.034667-6.101334A424.917333 424.917333 0 0 1 426.666667 853.333333C191.018667 853.333333 0 662.314667 0 426.666667S191.018667 0 426.666667 0s426.666667 191.018667 426.666666 426.666667c0 102.698667-36.266667 196.949333-96.768 270.592zM426.666667 768a341.333333 341.333333 0 1 0 0-682.666667 341.333333 341.333333 0 0 0 0 682.666667z"
                        fill="#ffffff" p-id="5325"></path>
                    </svg>
                    <span>检索</span>
                  </el-button>
                </div>
                <!-- 显示的内容 -->
              </div>

            </div>
          </div>
          <div>
            <!-- 点击常规告警显示的内容 -->
            <div v-if="showinfo == 1">
              <CriticalAlarm :criticalDataSource="alarmsStore.$state.DataSource" :devices="devicesStore.$state.devices" :selectDevice="selectDevice"></CriticalAlarm>
              <Pagination :total="Number(alarmsStore.$state.TotalRecords) > 0 ? alarmsStore.$state.TotalRecords : 0" :pageSize="pageSize1" @pageChange="handlerpageChange1"
                @sizeChange="handlersizeChange1">
              </Pagination>
            </div>
            <!-- 点击严重警告                   显示的内容 -->
            <div v-if="showinfo == 2">
              <GeneralAlarm :generalDataSource="alarmsStore.$state.DataSource" :devices="devicesStore.$state.devices" :selectDevice="selectDevice"></GeneralAlarm>
              <Pagination :total="Number(alarmsStore.$state.TotalRecords) > 0 ? alarmsStore.$state.TotalRecords : 0" :pageSize="pageSize2" @pageChange="handlerpageChange2"
                @sizeChange="handlersizeChange2">
              </Pagination>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
  
<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
//用户登录相关的小仓库
import { useAlarmsStore } from "@/stores/alarms";
import { useDevicesStore } from "@/stores/devices";
import CriticalAlarm from "./CriticalAlarm/citicalAlarm.vue"
import GeneralAlarm from "./GeneralAlarm/generalAlarm.vue"
import Pagination from "../Details/Pagination/pagination.vue";
import Head from "@/components/Head/head.vue";
// 获取设备小仓库
const alarmsStore = useAlarmsStore();
const devicesStore = useDevicesStore();
import dayjs from "dayjs";
const showinfo = ref(1);

const selectDevice = ref()

const pageNo1 = ref(1)//第几页
const pageNo2 = ref(1)//第几页
const pageSize1 = ref(15)// 每页几条
const pageSize2 = ref(15)// 每页几条
//收集日历数据
const startDate = ref(dayjs().startOf('day').format('YYYY-MM-DD HH:mm:ss'));
const endDate = ref<any>(dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss'));
const dateRange = ref<any>([startDate.value, endDate.value]);


onMounted(async () => {
  // 先获取所有设备信息
  await getDevices()
  // 在调告警信息的函数
  getCriticalAlarms();
  getAllAlarms()

})

const clearSelection = () => {
  selectDevice.value = null
}

// 获取所有设备信息的功能函数
const getDevices = async () => {
  // 请求获取所有设备信息
  await devicesStore.Alldevice();
};
// 分页器的事件
//当前是第几页 
const handlerpageChange1 = (msg: any) => {
  pageNo1.value = msg
  // 如果pageNo变化，重新发请求获取告警中心的数据
  getCriticalAlarms()
}
// 每也几条
const handlersizeChange1 = (msg: any) => {
  pageSize1.value = msg
  // 如果pageSize变化，重新发请求获取告警中心的数据
  getCriticalAlarms()

}

// 点击左侧菜单栏的回调函数
const handler = async (number: any) => {
  // 将点击的参数赋值给控制展示的字段
  showinfo.value = number;
  // 当点击切换时，模板应该清空，保证两个不会做关联
  selectDevice.value = null
  if (number == 1) {
    getCriticalAlarms()
  }
  if (number == 2) {
    getGeneraAlarms()
  }
}
const handlerpageChange2 = (msg: any) => {
  pageNo2.value = msg
  // 如果pageNo变化，重新发请求获取告警中心的数据
  getGeneraAlarms()
}
// 每也几条
const handlersizeChange2 = (msg: any) => {
  pageSize2.value = msg
  // 如果pageSize变化，重新发请求获取告警中心的数据
  getGeneraAlarms()

}
// 常规告警
const getCriticalAlarms = async () => {
  const data = {
    TerminalIdentity: selectDevice.value,
    BeginTime: dateRange.value[0],
    EndTime: dateRange.value[1],
    AlarmLevel: 1,
    PageNumber: pageNo1.value,
    PaginationSize: pageSize1.value
  }
  await alarmsStore.alarms(data);
}

const getAllAlarms = async () => {
  const data = {
    BeginTime: dateRange.value[0],
    EndTime: dateRange.value[1],
    PageNumber: pageNo1.value,
    PaginationSize: pageSize1.value
  }
  await alarmsStore.alarms(data);

}

// 严重告警
const getGeneraAlarms = async () => {
  const data = {
    TerminalIdentity: selectDevice.value,
    BeginTime: dateRange.value[0],
    EndTime: dateRange.value[1],
    AlarmLevel: 2,
    PageNumber: pageNo2.value,
    PaginationSize: pageSize2.value
  }
  await alarmsStore.alarms(data);
}

watch(selectDevice, selectDevicenewValue => {
  // changeDate(0)
  if (showinfo.value == 1) {
    getCriticalAlarms()
  }
  if (showinfo.value == 2) {
    getGeneraAlarms()
  }
})

// 时间日期的事件
const pickerOptions = {
  // 禁用未来日期
  disabledDate(time: any) {
    return time.getTime() > Date.now();
  }
};
const handleDateChange = () => {
  startDate.value = dayjs(dateRange.value[0]).format('YYYY-MM-DD HH:mm:ss');
  endDate.value = dayjs(dateRange.value[1]).format('YYYY-MM-DD HH:mm:ss');
};
const isEndCurrentTime = () => {
  const now = dayjs().format('YYYY-MM-DD HH:mm:ss');
  return dayjs(endDate.value).isSame(now, 'day');
};
// 监听dateRange的变化，并保持日期范围为三天或七天
watch(dateRange, () => {
  const diff = dayjs(dateRange.value[1]).diff(dateRange.value[0], 'day');
  if (diff > 2) {
    // 如果日期范围超过三天，则调整endDate为startDate加两天
    const newEndDate = dayjs(dateRange.value[1]).subtract(0, 'day').endOf('day').format('YYYY-MM-DD HH:mm:ss');
    endDate.value = newEndDate;
    // dateRange.value = [startDate.value, endDate.value];
  }
  // 如果时间变化，重新发请求获取告警中心的数据
  if (showinfo.value == 1) {
    getCriticalAlarms()
  } else {
    getGeneraAlarms()
  }
});

const changeDate = (days: any) => {
  const newStartDate = dayjs().subtract(--days, 'day').startOf('day').format('YYYY-MM-DD HH:mm:ss');
  startDate.value = newStartDate;
  endDate.value = dayjs().endOf('day').format('YYYY-MM-DD HH:mm:ss');
  dateRange.value = [startDate.value, endDate.value];
};
// 点击左双箭头
const decreaseDate = () => {
  const newStartDate = dayjs(startDate.value).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  const newEndDate = dayjs(endDate.value).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  startDate.value = newStartDate;
  endDate.value = newEndDate;
  dateRange.value = [startDate.value, endDate.value];
}
// 点击右双箭头
const increaseDate = () => {
  if (isEndCurrentTime()) return;
  const newStartDate = dayjs(startDate.value).add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  const newEndDate = dayjs(endDate.value).add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  startDate.value = newStartDate;
  endDate.value = newEndDate;
  dateRange.value = [startDate.value, endDate.value];
};
// 点击左单箭头
const leftDate = () => {
  const newStartDate = dayjs(startDate.value).subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  startDate.value = newStartDate;
  dateRange.value[0] = newStartDate;
}
// 点击右单箭头
const rightDate = () => {
  if (isEndCurrentTime()) return;
  const newEndDate = dayjs(endDate.value).add(1, 'day').format('YYYY-MM-DD HH:mm:ss');
  endDate.value = newEndDate;
  dateRange.value[1] = newEndDate;
}

</script>
  
<style scoped lang="less">
:deep(.el-col-3) {
  flex: 0;
}

:deep(.el-card__body) {
  padding: 0px;
}

.alarm {
  padding-top: 24px;
  margin: 0 16px;
  height: 970px;

  .alarm-container {

    .navigation-bar {
      .alarm-level {
        width: 240px;
        height: 64px;
        border-radius: 4px;
        display: flex;
        color: #ffffff;
        background: #f2994a;
        padding-left: 24px;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 20px;

        .pic {
          margin-right: 8px;
        }

        .wenzi {
          .china {
            font-size: 14px;
            line-height: 20px;
          }

          .Eng {
            font-size: 12px;
            color: #f9ead3;
          }
        }
      }

      .menu {
        width: 240px;
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-left: 24px;
        margin-bottom: 1px;
        color: #595959;
        border-radius: 4px;

        img {
          margin-right: 8px;
        }


      }

      .Activemenu {
        width: 240px;
        height: 40px;
        display: flex;
        align-items: center;
        font-size: 14px;
        padding-left: 24px;
        margin-bottom: 1px;
        color: #f09a4e;
        border-radius: 4px;
        background: #fbfbfa;

        img {
          margin-right: 8px;
        }

        .mark {
          margin-top: 6px;
          margin-left: 110px;
        }
      }


      .menu:hover {
        background: #fbfbfa;
      }

    }

    .information-bar {
      .information-content {
        padding-left: 32px;

        .information {
          border-radius: 4px;
          margin-bottom: 24px;

          .card-info {
            .info-top {
              display: flex;
              align-items: center;
              height: 96px;
              background: linear-gradient(to right, #776375, #D1D4DD);
              border-radius: 4px 4px 0 0;

              .info-top-img {
                img {
                  width: 80px;
                  height: 72px;
                }

                margin-left: 24px;
                margin-right: 40px;
              }

              .right-circle1 {
                position: absolute;
                right: 82px;
                top: -20px;
              }

              .right-circle2 {
                position: absolute;
                right: 120px;
                top: -10px;
              }

              .info-top-title {
                letter-spacing: 1px;

                .title {
                  font-size: 22px;
                  color: #fff;
                  height: 30px;
                  line-height: 30px;
                }

                .little-title {
                  font-size: 16px;
                  color: #fff;
                  height: 24px;
                  line-height: 24px;
                }
              }
            }

            .info-bottom {
              display: flex;
              align-items: center;
              justify-content: space-between;
              background: #fff;
              padding: 10px 20px;
              border-radius: 0px 0px 4px 4px;

              .picker {
                display: flex;
                align-items: center;
                margin-left: 0px;
                flex: 1;

                :deep(.el-input__wrapper) {
                  border-radius: 30px;
                }

                .jiantou {
                  width: 3px;
                  margin-left: 7px
                }

                .time {
                  font-size: 12px;
                  margin: 0 4px;
                  border: 1px solid #eaedf0;
                  color: rgba(89, 89, 89, 1);
                  border-radius: 8px;
                  line-height: 18px;
                  padding: 7px 8px;
                  cursor: pointer;
                }

              }




              .selectminute {
                width: 20%;
              }

              .yellowbtn {
                display: flex;

                .btn {
                  border-radius: 16px;
                  background: #F2994A;
                  color: #fff;
                  margin-left: 20px;
                  display: flex;
                  justify-content: space-between;

                  span {
                    margin-left: 8px;
                  }
                }
              }


            }
          }
        }
      }
    }
  }
}
</style>